<template>

   
    <div class="totalContent">
    
        <div class="top" style="display: flex;
        justify-content: space-between; align-items: center;
        ">
            <div class="topLeft" style="height: 100%; padding:10px 10px 0 0px; 
            display: flex;
            align-items: center;">
                <el-image  style="height:100%" src="../../../public/images/Logo/FB_text.jpg"></el-image>
                <span>|</span>
                <span>未来蜂账号</span>
               
            </div>
            <div class="topRight" style="height:100%;
            width: 30%;
            display: flex;
            align-items: center;">
                {{ userStore.loginUser.nickName }}
                <span>|</span>
                <a href="/personalCenter" ><span>退出</span></a> 
            </div>
        </div>  
    <div class="TopBread" style="height: 40px; display: flex; justify-content: flex-start;align-items: center;
     margin-bottom:5px;border-bottom: 0.667px rgba(0, 0, 0, 0.105) solid">
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/personalCenter' }">个人中心</el-breadcrumb-item>
            <el-breadcrumb-item>账号管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <el-card shadow="always" > 
        <div class="content" style="display: flex;">
            <div class="contentLeft">
              
                <div style="display: flex;
                flex-direction: column;
                height: 100%;">
                    <div style="display: flex;
                flex-direction: column; flex: 3;">
                        <div class="s1">
                            <el-image style="width: 72px;height:72px;" :src="Path.imgPath + user.icon"></el-image>
                        </div>
                        <div class="s1">
                            {{ userStore.loginUser.nickName }}
                        </div>
                        <div class="s1">
                            <div style="display: flex;">
                                <span>
                                    账号 :
                                </span>
                                <span style="padding-left: 10px;">
                                    {{ userStore.loginUser.phone }}
                                </span>
                            </div>
                        </div> 
                    </div>
                  
                    
                    <div style="flex:7;">
                        <ul id="buttonList" style="width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-evenly; padding: 0; margin: 0; list-style: none;">
                        <li v-for="(item, index) in items" :key="index" style="width: 100%; flex: 1;">
                            <el-button
                            :class="{ 'active-button': selectedIndex === index, 'inactive-button': selectedIndex !== index }"
                            @click="selectButton(index)"
                            style="width: 100%; height: 100%;">
                            {{ item }}
                            </el-button>
                        </li>
                        </ul>
                    </div>
                    
                </div>
                
            </div>
            <div class="contentRight" style="
            ">  
                <div style="width: 100%;height: 100%;display: flex;
                    flex-direction: column; align-items: center; 
                     " v-if="mainIsShow">
                    <main0     
                            :id="user.id"
                            :email="user.email"
                            :icon="user.icon"
                            :nickName="user.nickName"
                            :name="user.name"
                            :phone="user.phone"
                            :address="user.address"
                            :birthday="user.birthday"
                            >
                    </main0>
                </div>  
                <div v-if="accountSecurity">
                    <accountSecurity0 
                        v-model:email="user.email"
                        v-model:phone="user.phone"
                       >
                    </accountSecurity0>
                </div>      
            </div>
        </div>    
    </el-card>  
    </div>
    
    <div class="bottom">
            <footer0></footer0>
        </div> 
    
</template>
<script setup>
import { ref,computed } from 'vue'
import { Path } from '@/constant';
import { get,post } from '@/plugins/axios';
import { ArrowRight } from '@element-plus/icons-vue'

import main0 from '@/views/accountInformation-lzm/main.vue'
import accountSecurity0 from '@/views/accountInformation-lzm/accountSecurity.vue'
import footer0 from '@/views/simpleFooter-lzm/index.vue'

/* 假路由 */
let mainIsShow = ref (true)
let accountSecurity = ref (false)
let paymentsIsShow = ref (false) 
import { useUserStore } from '@/stores/pinia'
import { watchEffect } from 'vue';  
const userStore = useUserStore()
const user = computed(() => userStore.loginUser);  
userStore.setLoginUser()   // 待删除
user.value = userStore.loginUser
watchEffect(() => {  
  // 当这个值发生变化后 可以执行一些写操作
});
const items = ['个人信息', '账号安全', '付款与账单', '隐私中心', '生命设置'];
const selectedIndex = ref(0);
function selectButton(index) {
  selectedIndex.value = index;
  if(index==0){b1()}
 else if(index==1){b2()}
 else if(index==2){b3()}
}
/* test */
const b1 = () =>{
    mainIsShow.value=true;
    accountSecurity.value=false;
    paymentsIsShow.value=false; 
}
const b2 = () =>{
    accountSecurity.value=true;
    mainIsShow.value=false;
    paymentsIsShow.value=false;
    
}
const b3 = () =>{
    paymentsIsShow.value=true;
    mainIsShow.value=false;
    accountSecurity.value=false;
    
}
/* test */


</script>
<style scoped lang="scss">
*{
    border:0px;
    padding:0px;
    box-sizing:border-box;
}
a {
  text-decoration: none; /* 去掉下划线 */
  color: inherit; /* 继承父元素的字体颜色 */
  background: none; /* 去掉背景颜色 */
  border: none; /* 去掉边框 */
}

.el-button {
  border: none;
  background-color: #f0f0f0;
  color: #333;
}

.active-button {
  background-color: #007bff; /* 蓝色背景 */
  color: #fff; /* 白色文字 */
}

.inactive-button {
  background-color: #f0f0f0; /* 灰色背景 */
  color: #333; /* 黑色文字 */
}

ul{
    list-style: none;

    li{

    }
}
.totalContent{
    width: 80%;
    height:100%;
    margin:0 10% 0 10%;
    .top{
    height:50px;

        span{
            margin-left:20px;
        }
    }
    .content{
        height:620px;
        width: 100%;
        padding-top:50px;
   /*      border: 0.667px black solid; */
        .contentLeft{
            height: 500px;
            width: 20%;
            /* border:0.667px black solid; */
            .s1{
                width:100%;
                height: auto;                
                display: flex;
                justify-content: center;
                margin-top:10px;
            }
        }
        .contentRight{
            height: 100%;
            width: 60%;
            margin-left: 80px;
          /*   border:0.667px black solid; */
        }
        
    }
   

}
.bottom{
        height:45px;
        width: 100%;
        position: absolute;
        bottom: 0;
        margin-left:-10px;
    }
     
</style>